<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
      xmlns:shiro="http://www.w3.org/1999/xhtml">

<head th:include="common/Head :: headCss">

</head>
<div>


    <!--
     <link href="../bootstrap/js/project/sys/shop/css/datatables.min.css" rel="stylesheet">

    <link rel="stylesheet" href="../bootstrap/js/dept/css/bootstrap-table.min.css">
    -->

    <link href="/bootstrap/js/project/sys/shop/css/fileinput.min.css" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="/bootstrap/dataTable/datatables.min.css"/>


    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        .table > thead:first-child > tr:first-child > th {
            text-align: center;
        }
    </style>
</div>
<body>
<input type="hidden"  id="bigOrder" th:value="${bOrderNum}"/>
<div id="wrapper">
    <!--<nav th:include="common/Left_Ment :: left"></nav>-->
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">Config option 1</a>
                            </li>
                            <li><a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <div class="grid-btn">
                            <!--<a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>-->
                            <!--
                             <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                             <a class="btn btn-success" @click="del"><i
                                     class="fa fa-plus-square"></i>&nbsp;上架</a>
                             <a class="btn btn-success" @click="del"><i
                                     class="fa fa-minus-square"></i>&nbsp;下架</a> -->
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th></th>
                                <th>大订单编码</th>
                                <th>订单编码</th>
                                <th>商品名称</th>
                                <th>价格</th>
                                <th>商品数量</th>
                                <th>商品备注</th>
                            </tr>
                            </thead>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="common/Head :: js"></div>

<script src="/bootstrap/js/dept/js/vue.min.js"></script>


<script src="/bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="/bootstrap/js/project/sys/shop/js/fileinput.min.js"></script>
<script src="/bootstrap/js/project/sys/shop/js/zh.js"></script>
<script src="/bootstrap/js/project/sys/shop/js/shopData.js"></script>


<script type="text/javascript" src="/bootstrap/dataTable/datatables.min.js"></script>


<!-- Page-Level Scripts -->
<script>

    var data;

    $(document).ready(function () {


        $("#shopMange").attr("class", "active");
        $("#shopMange_ul").attr("class", "nav nav-second-level collapse in");

        $("#commodityManage").attr("class", "active");



        $('.dataTables-example').DataTable({
            pageLength: 10,
            responsive: true,
            //  dom: '<"html5buttons"B>f',
            dom: '<"html5buttons"B>f<"top">rt<"bottom"lp>i<"clear">',
            pagingType: "full_numbers",
            destroy: true,
            colReorder: true,
            responsive: true,
            language: {
                "sLengthMenu": "每页显示 _MENU_条",
                "paginate": {
                    "last": "最后一页",
                    "first": "第一页",
                    "next": "下一页",
                    "previous": "上一页",
                    "show": "显示"
                },
                zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
                //下面三者构成了总体的左下角的内容。
                info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
                infoEmpty: "0条记录",//筛选为空时左下角的显示。
                infoFiltered: "",//筛选之后的左下角筛选提示，
                buttons: {
                    "colvis": "列可见性",
                    "print": "打印",
                    "copy": "复制数据",
                },
                editor: {
                    "Update": "更新",
                }

            },
            buttons: [
                {extend: 'colvis'},
                {
                    extend: 'print',
                    customize: function (win) {
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                },
                {extend: 'copy'},
                {extend: 'csv'},
                {extend: 'excel', title: 'ExampleFile'},
                {extend: 'pdf', title: 'ExampleFile'}
            ],
            ajax:
                {
                    url: "/order/manage/detailListData?bOrderNum="+$("#bigOrder").val(),
                    dataSrc: function (r) {
                        console.log(r);
                        return r.page.list;
                    },
                    data: function (d) {
                        d.borderNum = getUrlParam("borderNum")
                    },
                    dataType: 'json',
                    type: "get",
                }
            ,
            columns: [
                {data: null, orderable: false},
                {data: "borderNum"},
                {data: "sorderNum"},
                {data: "commodityName"},
                {data: "price"},
                {data: "num"},
                {data: "remark"}

            ],
            aoColumnDefs: [
                {
                    "render": function (data, type) {
                        return "<div align='center'><input type='radio' name='radio' value='" + data.id + "' ></div>";
                    },
                    "aTargets": 0 //第一列
                },
            ],
            columnDefs:
                [
                    {orderable: false, targets: 0},
                    {width: "15%", orderable: false, targets: 5}
                ],
            order:
                [1, 'asc']
        })
        ;



    });
    //对Date 类进行扩展
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }


    /*$('.dataTables-example').on('click','tr', function() {
        var bigOrderCode = $($(this).find('td')[2]).text();
        console.log('bigOrderCode = ', bigOrderCode);
        layer.open({
            type: 2,
            title: '订单详情',
            shadeClose: true,
            shade: 0.1,
            scrollbar: true,
            area: ['80%', '90%'],
            content: '/shop/pictureCarousel?shopId=1'
        })

    });*/

    $(function () {

    })


</script>

</body>

</html>
